<template>
  <div class="dataGrid" v-bind:style="{ height:dataGridHeight + 'px' }">
    <div class="title">
      {{title}}
    </div>
    <div class="head">
      <div class="search-handler">
        <el-form :inline="true" class="demo-form-inline">
          <slot name="form"></slot>
          <el-form-item>
            <el-button type="primary" class="dataGrid-form-submit" @click="onSubmit" icon="search">search</el-button>
            <el-button type="default" class="dataGrid-form-default" @click="onReset">reset</el-button>
          </el-form-item>
        </el-form>
        <slot name="tabs"></slot>
      </div>
    </div>
    <div class="body" v-bind:style="{ height:bodyHeight  + 'px'}">
      <el-table class="table-def"
                :data="queryedData.dataList"
                stripe
                style="width: 100%">
        <slot name="body"></slot>
      </el-table>
    </div>
    <div class="foot" v-bind:style="{ height:footHeight + 'px' }">
      <div class="pagination clear-float">
          <el-tabs v-model="queryedData.currentPage">
            <el-tab-pane v-for="pageNoTip in pageNoList"
                         :key="pageNoTip.key"
                         :label="pageNoTip.key"
                         :name="pageNoTip.key"
                         :disabled="!pageNoTip.valid"></el-tab-pane>
          </el-tabs>
          <div class="pagination-tool">
            <div class="el-form-item">
              <label class="el-form-item__label"><i class="el-icon-caret-right"></i></label>
              <div class="el-form-item__content">
                <div class="el-input">
                  <input autocomplete="off" type="text" rows="2" validateevent="true" class="el-input__inner">
                </div>
              </div>
            </div>
          </div>
          <div class="pagination-tool">
            <div class="el-form-item">
              <label class="el-form-item__label"><i class="el-icon-d-caret"></i></label>
              <div class="el-form-item__content">
                <div class="el-input">
                  <input autocomplete="off" type="text" rows="2" validateevent="true" class="el-input__inner" v-model="queryedData.pageSize">
                </div>
              </div>
            </div>
          </div>
          <div class="pagination-tool right">
            <dl>
              <dt>{{queryedData.offSet + 1}}-{{(queryedData.offSet + queryedData.pageSize) - queryedData.totalData <= 0 ? (queryedData.offSet + queryedData.pageSize) : queryedData.totalData}} of {{queryedData.totalData}}</dt>
              <dd>(p.<b>{{queryedData.currentPage}}</b>/{{queryedData.totalPage}})</dd>
            </dl>
          </div>
        </div>
        <div class="resize-triggers">
          <div class="expand-trigger">
            <div style="width: 1901px; height: 43px;"></div>
          </div>
          <div class="contract-trigger"></div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'DataGrid',
    props: ['title', 'url', 'dataName'],
    data () {
      return {
        screenWidth: window.innerWidth,
        screenHeight: window.innerHeight,
        dataGridHeight: 0,
        bodyHeight:0,
        footHeight:46,
        queryedData:{},
        pageNoVision:9,
        pageNoList:[{
            "key":"1",
            "label":"1",
            "valid":true
        }]
      }
    },
    created: function() {
      var that = this;
      this.axios.get(that.url)
        .then(function (response) {
          that.queryedData = response.data;
        });
      //加入resize监控
      window.onresize = () => {
        return (() => {
          window.screenWidth = window.innerWidth;
          that.screenWidth = window.screenWidth;
          that.screenHeight = window.screenHeight;
          window.screenHeight = window.innerHeight;
        })();
      }
    },
    //数据进行重新渲染的时候进行重新计算的操作
    updated: function() {
      var that = this;
      //fullHeight操作
      that.fullHeight();
    },
    methods: {
      fullHeight: function() {
        var _winHeight = window.innerHeight;
        var _elm = this.$vnode.elm;
        //容器到底
        this.dataGridHeight = _winHeight - _elm.offsetTop;
        //内容部分做出适应性的操作
        this.bodyHeight = this.dataGridHeight - _elm.getElementsByClassName("body")[0].offsetTop - this.footHeight;
      },
      onReset: function() {
        var that = this;
        that.$parent[this.dataName] = {};
        this.axios.get(that.url, {
          params: {}
        })
          .then(function (response) {
            that.queryedData = response.data;
          });
        return false;
      },
      onSubmit: function() {
        var that = this;
        this.axios.get(that.url, {
            params: that.$parent[this.dataName]
        })
          .then(function (response) {
            that.queryedData = response.data;
          });
        return false;
      },
      genPageNoTip: function(key, valid) {
        var item = {};
        item.key = key.toString();
        item.valid = valid.toString();
        this.pageNoList.push(item);
      },
      genPageNoList: function() {
        var perNo = [];
        var tailNo = [];
        var pageNo = [];
        var remainder = Math.min(parseInt(this.pageNoVision), parseInt(this.queryedData.totalPage - 1));
        /**
         中间值计算 显示最大总数/2
         线性前置计算最小为1
         线性后置计算最大为totalPage
         当前页尽量趋中算法
         */
        do {
            if(this.queryedData.currentPage - perNo.length - 1 > 0) {
              perNo.push(this.queryedData.currentPage - perNo.length - 1);
              remainder--;
            }
            if(this.queryedData.currentPage + tailNo.length + 1 <= this.queryedData.totalPage) {
              tailNo.push(this.queryedData.currentPage + tailNo.length + 1);
              remainder--;
            }
        } while(remainder > 0);
        //如有必要对用于进行尾部的截断
        if(remainder < 0) {
          tailNo.slice(0, tailNo.length - 1);
        }
        pageNo = pageNo.concat(perNo);
        pageNo.push(this.queryedData.currentPage);
        pageNo = pageNo.concat(tailNo);
        //生成新的页标签队列
        this.pageNoList = [];
        //生成前置
        perNo.reverse();
        if(pageNo[0] > 1) {
          this.genPageNoTip("1", true);
        }
        if(pageNo[0] > 2) {
          this.genPageNoTip("...", false);
        }
        for(var i in pageNo) {
          this.genPageNoTip(pageNo[i].toString(), true);
        }
        //生成后置
        if(pageNo[pageNo.length - 1]  + 1 < this.queryedData.totalPage) {
          this.genPageNoTip("...", false);
        }
        if(pageNo[pageNo.length - 1] < this.queryedData.totalPage) {
          this.genPageNoTip(this.queryedData.totalPage, true);
        }
      }
    },
    watch: {
      "queryedData": function(val, oldVal) {
        if(val && val.formQuery) {
          this.genPageNoList();
          //触发当前页动画重置
          this.queryedData.currentPage = this.queryedData.currentPage.toString();
        }
      },
      "screenWidth": function(val) {
        this.fullHeight();
      },
      "screenHeight": function(val) {
        this.fullHeight();
      }
    }
  }
</script>
